<script setup>
import { onMounted } from 'vue'
import L from 'leaflet'

const props = defineProps({
  photos: Array
})

let map = null

onMounted(() => {
  map = L.map('map-container').setView([39.9042, 116.4074], 4)
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map)

  props.photos.filter(p => p.gps).forEach(photo => {
    L.marker([photo.gps.lat, photo.gps.lng])
      .bindPopup(`<img src="${photo.thumbnail}" width="100">`)
      .addTo(map)
  })
})
</script>

<template>
  <div id="map-container" class="timeline-map" />
</template>